<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
      <!-- 下载文件显示进度 -->
    <script>
      function downloadFile(url) {
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          xhr.open("GET", url, true);
          xhr.responseType = "blob";

          xhr.onload = function () {
            if (xhr.status === 200) {
              resolve(xhr.response);
            } else {
              reject(new Error("Download failed."));
            }
          };

          xhr.onprogress = function (event) {
            if (event.lengthComputable) {
              const percentComplete = (event.loaded / event.total) * 100;
              console.log(`Download progress: ${percentComplete.toFixed(2)}%`);
            }
          };

          xhr.send();
        });
      }

      // 使用示例
      const fileUrl = "https://example.com/file.pdf";
      downloadFile(fileUrl)
        .then((response) => {
          // 下载完成后处理文件
          const file = new Blob([response], { type: "application/pdf" });
          const fileUrl = URL.createObjectURL(file);
          // 在页面中创建一个链接并点击下载
          const a = document.createElement("a");
          a.href = fileUrl;
          a.download = "file.pdf";
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          URL.revokeObjectURL(fileUrl);
        })
        .catch((error) => {
          console.error(error);
        });
    </script>
    <!-- 下载图片显示进度 -->
    <script>
      function downloadImages(imageUrls) {
        const totalImages = imageUrls.length;
        let downloadedImages = 0;

        function updateProgress() {
          const progress = Math.round((downloadedImages / totalImages) * 100);
          console.log(`Download progress: ${progress}%`);
        }

        function loadImage(url) {
          return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.responseType = "blob";

            xhr.onload = function () {
              if (xhr.status === 200) {
                resolve(xhr.response);
              } else {
                reject(new Error(`Failed to download image: ${url}`));
              }
            };

            xhr.onerror = function () {
              reject(new Error(`Failed to download image: ${url}`));
            };

            xhr.onprogress = function (event) {
              if (event.lengthComputable) {
                // 更新下载进度
                downloadedImages++;
                updateProgress();
              }
            };

            xhr.send();
          });
        }

        const imagePromises = imageUrls.map((url) => loadImage(url));

        Promise.all(imagePromises)
          .then((images) => {
            console.log("All images downloaded successfully");
            // 在这里可以进行下一步的操作，如显示图片等
          })
          .catch((error) => {
            console.error("Image download failed:", error);
          });
      }

      // 调用示例
      const urls = ["image1.jpg", "image2.jpg", "image3.jpg"];
      downloadImages(urls);
    </script>
  </body>
</html>
